<template>
    <div class="wrapper">
         <img :src="allData.bannerImg" alt="">
        <router-link to="/" tag="div" class="left">
          <span class="iconfont">&#xe624;</span>
        </router-link>
        <div class="bott">
             <p class="tit_a"><span class="iconfont"></span>566</p>
             <p class="tit_b">{{allData.sightName}}</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
        props:{
           allData:Object
        }
    }
</script>

<style lang="stylus" scoped>
   .wrapper{
       position :relative;
       width: 100%;
       height:0;padding-bottom :55%;
       img{
         width: 100%;
       }
       .left{
           position :absolute;
           left:.05rem;
           top:.05rem;
           width:.36rem;
           height:.36rem
           border-radius :50%;text-align:center;
           background:darkgrey;line-height :.36rem;color:white;
       }
      .bott{
        position :absolute;
        left:.1rem;
        bottom:.1rem;
        .tit_a{
          width: .6rem;
          height: .2rem;
          background: rgba(0,0,0,.5);
          border-radius: .1rem;
          font-size: .12rem;
          color: #fff;
          line-height: .2rem;
          text-align: center;
        }
       .tit_b{
         line-height: .2rem;
         color: #fff;
         font-size: .18rem;
         text-shadow: 0 1px 2px rgba(0,0,0,0.70);
       }
      }
   }
</style>
